//作用：实现鼠标移动组件得复用
import React from "react";

// import imgCat from '../static/cat.png';

class Mouse extends React.Component {
    state = {
        x: 0,
        y: 0
    }
    removeMouse = (e) => {
        // console.log(e)
        this.setState({
            x:e.clientX,
            y:e.clientY,
        })
    }
    render() {
        return this.props.render(this.state)
    }
    componentDidMount() {
       window.addEventListener('mouseover', this.removeMouse)
    }
}


class RenderProps extends React.Component {
    render() {
        return (
            <div>
                <h1>render props 高阶组件应用</h1>
                <Mouse render={
                    e=>{
                        return (
                            <p>鼠标位置：X轴：{e.x},Y轴:{e.y}</p>
                        )
                    }
                }></Mouse>
                <h2>猫抓老鼠（复用组件）</h2>
                {/* <Mouse render={
                    e=>{
                        return (
                            <img src={imgCat} alt="猫咪" style={{
                                position:"absolute",
                                left:e.x - 250,
                                top:e.y - 215
                            }} />
                        )
                    }
                }></Mouse> */}
            </div>
        )
    }
}

export default RenderProps